<template>
	<view class="reaname_wp">
		<view class="reaname_item">
			<view class="reaname_title">
				姓名<text>*</text>
			</view>
			<input class="reaname_input" type="text" placeholder="请输入姓名" />
		</view>
		<view class="reaname_item">
			<view class="reaname_title">
				身份证号<text>*</text>
			</view>
			<input class="reaname_input" type="text" placeholder="请输入身份证号" />
		</view>
		<view class="reaname_photo">
			<view class="reaname_title">
				身份证照片<text>*</text>
			</view>
			<view class="reaname_message">1.身份证照片不得有遮挡，保证字迹清晰</view>
			<view class="reaname_message">2.请在白色背景下拍摄，保证身份证边缘清晰</view>
			<view class="reaname_message">3.请从证件的正上方拍摄，防止画面变形</view>
		</view>
		<view class="reaname_upload">
			<view class="reaname_upload_item1">
				<image @click="uploadTap(1)" class="reaname_upload_image" :src="image1" mode=""></image>
				<view class="reaname_upload_message">身份证正面</view>
			</view>
			<view class="reaname_upload_item2">
				<image @click="uploadTap(2)" class="reaname_upload_image" :src="image2" mode=""></image>
				<view class="reaname_upload_message">身份证正面</view>
			</view>
		</view>
		<view class="reaname_sumbit" @click="onsumbit">提交</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			image1:'/static/bg_game.jpg',
			image2:'/static/bg_game.jpg'
		}
	},
	methods:{
		onsumbit(){
			this.$navBack();
		},
		uploadTap(v){
			console.log(v);
		}
	}
}
</script>

<style lang="scss">
	.reaname_wp{
		color: $font-color-dark;
		padding: 0 20upx;
	}
	.reaname_item{
		border-bottom: 1px hsl(0,0%,87%) solid;
		display: flex;
		align-items: center;
		padding: 20upx 0;
	}
	.reaname_title text{
		color: #FF0000;
		font-size: 36upx;
	}
	.reaname_input{
		color: $font-color-dark;
		flex: 1;
		text-align: right;
		font-size: $font-sm;
	}
	.reaname_message{
		color: $font-color-light;
		font-size: $font-sm;
		line-height: 50upx;
	}
	.reaname_upload{
		margin-top: 30upx;
		display: flex;
		align-items: center;
	}
	.reaname_upload_item1,.reaname_upload_item2{
		box-sizing: border-box;
		padding-right: 10upx;
		width: 50%;
	}
	.reaname_upload_item2{
		padding-left: 10upx;
	}
	.reaname_upload_image{
		border-radius: 10upx;
		width: 345upx;
		height: 272upx;
	}
	.reaname_upload_message{
		text-align: center;
	}
	.reaname_sumbit{
		background-color: $base-color;
		border-radius: 40upx;
		color: #fff;
		font-size: 30upx;
		line-height: 70upx;
		margin: 60upx auto;
		text-align: center;
		letter-spacing: 3px;
		width: 90%;
	}
</style>
